@import './colors';
@import './buttons';
@import './mixins/mixins';

.toolbar,
.toolbar-filters,
.toolbar-inner,
.toolbar-button {
  height: 100%;
  margin: 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.toolbar {
  box-sizing: border-box;
  padding: 48px 0 144px;
}

.toolbar-filters {
  box-sizing: border-box;
  overflow: hidden;
  padding: 48px 0 0;
}

.toolbar-inner {
  overflow: auto;
  width: 68px;
}

.toolbar-charts,
.toolbar-plus,
.toolbar-trash,
.toolbar-setting {
  left: 0;
  overflow: hidden;
  position: absolute;
  width: 48px;
  z-index: 2;
}

.toolbar-button {
  @include button(48px, 48px, 18px);
  cursor: pointer;

  &:hover {
    color: $gray;
  }
}

.toolbar-plus {
  top: 48px;
}

.toolbar-charts {
  bottom: 96px;
}

.toolbar-trash {
  bottom: 48px;
}

.toolbar-setting {
  bottom: 0;
}

.toolbar-active {
  color: $gray;

  &:hover {
    color: $gray;
  }
}
